<template>
	<view class="container">
		<view class="tab-box">
			<view class="tab-item" @tap="tapItem" data-index="0">
				<view class="item-label" :class="{'item-label-active': isShowBox[0]}">本科一批</view>
				<view class="item-line" :class="{'item-line-active': isShowBox[0]}"></view>
			</view>
			<view class="tab-item" @tap="tapItem" data-index="1">
				<view class="item-label" :class="{'item-label-active': isShowBox[1]}">本科二批</view>
				<view class="item-line" :class="{'item-line-active': isShowBox[1]}"></view>
			</view>
			<view class="tab-item" @tap="tapItem" data-index="2">
				<view class="item-label" :class="{'item-label-active': isShowBox[2]}">高职高专</view>
				<view class="item-line" :class="{'item-line-active': isShowBox[2]}"></view>
			</view>
		</view>
		<view class="list-box" v-show="isShowBox[0]">
			<view class="list-item" v-for="(item,index) in dataList" :key="index">
				<view class="university-logo">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596199968973&di=9038388f55521cb34df667792cb4fea9&imgtype=0&src=http%3A%2F%2Fp3.img.cctvpic.com%2F20111008%2Fimages%2F1318068125341_1318068125341_r.jpg"></image>
				</view>
				<view class="university-name-label">
					<view class="university-name">早稻大学</view>
					<view class="university-label-box">
						<view class="university-label">世界一流</view>
						<view class="university-label">211工程</view>
					</view>
				</view>
				<view class="university-major">沙雕制作</view>
			</view>
		</view>
		<view class="list-box" v-show="isShowBox[1]">
			<view class="list-item" v-for="(item,index) in dataList" :key="index">
				<view class="university-logo">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596199968973&di=9038388f55521cb34df667792cb4fea9&imgtype=0&src=http%3A%2F%2Fp3.img.cctvpic.com%2F20111008%2Fimages%2F1318068125341_1318068125341_r.jpg"></image>
				</view>
				<view class="university-name-label">
					<view class="university-name">东京大学</view>
					<view class="university-label-box">
						<view class="university-label">世界一流</view>
						<view class="university-label">211工程</view>
					</view>
				</view>
				<view class="university-major">沙雕表演</view>
			</view>
		</view>
		<view class="list-box" v-show="isShowBox[2]">
			<view class="list-item" v-for="(item,index) in dataList" :key="index">
				<view class="university-logo">
					<image src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1596199968973&di=9038388f55521cb34df667792cb4fea9&imgtype=0&src=http%3A%2F%2Fp3.img.cctvpic.com%2F20111008%2Fimages%2F1318068125341_1318068125341_r.jpg"></image>
				</view>
				<view class="university-name-label">
					<view class="university-name">千阪产业大学</view>
					<view class="university-label-box">
						<view class="university-label">世界一流</view>
						<view class="university-label">211工程</view>
					</view>
				</view>
				<view class="university-major">沙雕工程</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				curIndex: 0,
				isShowBox: [true, false, false],
				dataList: [1, 2, 3, 4, 5, 6]
			}
		},

		methods: {

			tapItem(e) {
				this.isShowBox[this.curIndex] = false
				this.curIndex = e.currentTarget.dataset.index
				this.isShowBox[this.curIndex] = true
			}

		}
	}
</script>

<style>
	page {
		background-color: #eeeeee;
	}

	.tab-box {
		width: 750rpx;
		height: auto;
		background-color: #ffffff;
		display: flex;
		flex-direction: row;
		justify-content: space-evenly;
		padding-top: 30rpx;
	}

	.item-line {
		width: 56rpx;
		height: 4rpx;
		background-color: #ffffff;
		margin-top: 20rpx;
	}

	.item-line-active {
		background-color: #5683ec;
	}

	.item-label {
		font-size: 28rpx;
		color: #333333;
	}

	.item-label-active {
		color: #5683ec;
	}

	.tab-item {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.list-box {
		width: 750rpx;
		height: auto;
		background-color: #ffffff;
		margin-top: 20rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.list-item {
		width: 660rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		background-color: #ffffff;
		height: 180rpx;
		color: #333333;
		border-bottom: solid 1rpx #f5f5f5;
	}

	.university-logo {
		display: flex;
		flex-direction: column;
		height: 100%;
		justify-content: center;
	}

	.university-logo image {
		width: 130rpx;
		height: 130rpx;
	}

	.university-name-label {
		width: 360rpx;
	}

	.university-name {
		font-size: 30rpx;
		margin-top: 40rpx;
	}

	.university-label-box {
		display: flex;
		flex-direction: row;
		margin-top: 14rpx;
	}

	.university-label-box {
		display: flex;
		flex-direction: row;
		margin-top: 14rpx;
	}

	.university-label {
		font-size: 20rpx;
		color: #999999;
		border: solid 1rpx #f5f5f5;
		margin-right: 8rpx;
		padding-left: 12rpx;
		padding-right: 12rpx;
		padding-top: 2rpx;
		padding-bottom: 3rpx;
	}

	.university-major {
		font-size: 24rpx;
		margin-top: 40rpx;
		color: #666666;
	}
</style>
